<template>
  <div class="app-container" ref="appContainer">
    <PropTable
      ref="tableData"
      :loading="loading"
      :columns="column"
      :data="data"
      @reset="reset"
      @onSubmit="onSubmit"
      :unadd="false"
    >
      <template v-slot:operation="scope">
        <el-button type="primary" size="small" icon="View" @click="gotoHome(scope.row)">
          详情
        </el-button>
        <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
          删除
        </el-button>
      </template>
    </PropTable>
  </div>
</template>
<script lang="ts" setup name="comprehensive">
  import { ref, onMounted } from 'vue'
  import {
    postMarketingContractSearch,
    deleteMarketingContractById,
  } from '@/api/controller/marketing-contract-controller/index'
  import {
    postProcurementContractSearch,
    deleteProcurementContractById,
  } from '@/api/controller/procurement-contract-controller/index'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import PropTable from '@/components/Table/PropTable/index.vue'
  const loading = ref(true)
  const appContainer = ref(null)
  const router = useRouter()
  const column = ref([
    {
      label: '合同类型',
      inSearch: true,
      valueType: 'select',
      itemIf: true,
      name: 'contractType',
      options: [
        { value: '0', label: '采购合同' },
        { value: '1', label: '销售合同' },
      ],
    },
    { label: '合同名称', name: 'contractName', inSearch: true, valueType: 'input', width: 200 },
    { label: '项目简称', name: 'projectBrief', inSearch: true, valueType: 'input', width: 200 },
    { label: '合同金额(元)', name: 'contractAmount', width: 140, moneyType: true },
    { label: '已付金额(元)', name: 'paidAmount', itemIf: false, width: 140, moneyType: true },
    { label: '已收金额(元)', name: 'receivedAmount', itemIf: true, width: 140, moneyType: true },
    { label: '已开票金额(元)', name: 'ticketAmount', width: 140, moneyType: true },
    { label: '合同状态', name: 'contractState', width: 140 },
    { label: '录入人', name: 'createName', width: 140 },
    { label: '签订时间', name: 'contractDate', width: 140 },
    { label: '完成时间', name: 'finishTime', width: 140 },
    { label: '质保金(元)', name: 'qualityAmount', width: 140, moneyType: true },
    { label: '质保到期', name: 'qualityDate', width: 140 },
    { label: '供应商', name: 'supplierName', itemIf: false, width: 200 },
    { label: '客户', name: 'clientName', itemIf: true, width: 200 },
    { label: '采购方', name: 'procurementName', width: 200 },
    { label: '供应方', name: 'vendorName', width: 200 },
    { label: '第三方', name: 'thirdName', width: 200 },
    { name: 'operation', slot: true, fixed: 'right', width: 180, label: '操作', type: false },
  ])

  const data = ref(null)
  const tableData = ref(null)

  //重置搜索条件
  const reset = async () => {
    try {
      loading.value = true
      let pageInfo = {
        pageNum: 1,
        pageSize: 15,
      }
      await getData(pageInfo)
    } finally {
      loading.value = false
    }
  }
  //搜索
  const onSubmit = async (val) => {
    try {
      loading.value = true
      await getData(val)
    } finally {
      loading.value = false
    }
  }
  const getData = async (val) => {
    if (val.contractType === '1') {
      const result = await postMarketingContractSearch(val)
      data.value = result.data
      data.value.list.forEach((item) => (item.contractType = '1'))
      tableData.value.formInline.contractType = '1'
      column.value[4].itemIf = true
      column.value[5].itemIf = false
      column.value[13].itemIf = true
      column.value[14].itemIf = false
    } else {
      const result = await postProcurementContractSearch(val)
      data.value = result.data
      data.value.list.forEach((item) => (item.contractType = '0'))
      tableData.value.formInline.contractType = '0'
      column.value[4].itemIf = false
      column.value[5].itemIf = true
      column.value[13].itemIf = false
      column.value[14].itemIf = true
    }
  }
  //初始化
  onMounted(async () => {
    try {
      loading.value = true
      let pageInfo = {
        pageNum: 1,
        pageSize: 15,
      }
      await getData(pageInfo)
    } finally {
      loading.value = false
    }
  })

  //跳转详情页
  const gotoHome = (row) => {
    router.push({
      name: 'contractInfo',
      state: { contractId: row.id, contractType: row.contractType },
    })
  }

  //删除合同
  const del = (row) => {
    ElMessageBox.confirm('如果确认，该合同所有信息都将被删除，数据无法恢复，请确认', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
      draggable: true,
    })
      .then(async () => {
        let res
        if (row.contractType === '0') {
          res = await deleteProcurementContractById({ id: row.id }, { loading: true })
          if (res.code === 200) {
            await getData({
              contractType: '0',
              pageNum: 1,
              pageSize: 15,
            })
            ElMessage.success('删除成功')
          }
        } else {
          res = await deleteMarketingContractById({ id: row.id }, { loading: true })
          if (res.code === 200) {
            await getData({
              contractType: '1',
              pageNum: 1,
              pageSize: 15,
            })
            ElMessage.success('删除成功')
          }
        }
      })
      .catch(() => {
        console.log('错误')
      })
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
